import React,{Component} from "react";
import "../assets/stylesheets/cityTables.css";

export default class CityTables extends Component{
    constructor(props){
        super(props);
        this.state = {
            selectedLetters: "ABCDEFG",
            citys:{
                "A":["阿坝","阿克苏","阿勒泰","阿里","安康","安顺","安阳"],
                "B":["北京","白城","白山","保定","宝鸡","包头","巴彦淖尔","巴中","毕节"],
                "C":["长春","常德","长沙","常州","朝阳","承德","成都","重庆"],
                "D":["大理市","大连","大兴安岭","达州","德州","定安"],
                "E":["恩施","鄂州","鄂尔多斯"],
                "F":["佛山","阜阳","福州","抚顺"],
                "G":["甘南","广安","广州","桂林","贵阳","高雄"],
                "H":["海口","汉中","合肥","呼和浩特","准安","怀化","黄冈","呼伦贝尔"],
                "J":["佳木斯","吉安","嘉峪关","吉林市","济南","景德镇","荆州"],
                "K":["开封","凯里","昆明","康定","库车"],
                "L":["廊坊","乐东","乐山","辽阳","临沂","丽水","六盘水"],
                "M":["马鞍山","绵阳","眉山"],
                "N":["南昌","南充","南宁"],
                "P":["莆田","盘锦","澎湖","平顶山","屏东","平凉","普洱"],
                "Q":["黔东南","清远","昌都","黔南","琼海","庆阳"],
                "R":["日照"],
                "S":["石家庄","上海","三峡","三亚","绍兴","商丘","山南","邵阳","汕尾","苏州"],
                "T":["太原","铜仁","塔城安","台中","台南","台州","台中","台南","台北","铜川","天津","通化"],
                "W":["温州","武汉","万宁","乌鲁木齐","万州","武夷山"],
                "X":["西双版纳","西安","香港","兴义","西昌"],
                "Y":["延安","延边","岳阳","盐城","银川","永州","榆林"],
                "Z":["张家界","张家口","遵义","中卫","郑州"],
            }
        }
    }
    componentDidMount(){
        //给父组件传递城市名称
        if(this.props.getCityNames){
            this.props.getCityNames(this.state.citys);
        }
    }
    //阻止冒泡，防止点击到后面的
    boxClick = (e) =>{
        e.stopPropagation();
        e.preventDefault();
    }
    //改变字母的选择
    lettersClick = (e) =>{
        if(e.target.children.length === 0){
            let nowNode = e.target,
                letters = e.target.innerText,
                nextNode = nowNode.nextElementSibling,
                preNode =  nowNode.previousElementSibling;

            nowNode.setAttribute("data-selected", "true");
            //遍历其他节点，将选中属性设置为false
            for( ; nextNode; nextNode = nextNode.nextElementSibling){
                if(nextNode.getAttribute("data-selected") === "true"){
                    nextNode.setAttribute("data-selected", "false");
                }
            }
            for( ; preNode; preNode = preNode.previousElementSibling){
                if(preNode.getAttribute("data-selected") === "true"){
                    preNode.setAttribute("data-selected", "false");
                }
            }
            this.setState({selectedLetters: letters});
        }
    }
    //给父组件传值
    getCityName = (e) => {
        if(e.target.children.length === 0){
            if(this.props.getCityName){
                this.props.getCityName(e);
            }
        }
    }
    render(){
        let selectedLetters = this.state.selectedLetters;
        let citys = this.state.citys;
        let arr = [];
        
        for(let i = 0; i < selectedLetters.length; i++){
            arr.push(selectedLetters.charAt(i));
        }

        return(
        <div className="city-table-box" onClick={this.boxClick}>
            <p>支持中文输入</p>
            <div id="letters" onClick={this.lettersClick}>
                <span data-selected="true">ABCDEF</span>
                <span>GHJKLM</span>
                <span>NPQRS</span>
                <span>TWXYZ</span>
            </div>
            <div id="citys" >
                { 
                    arr.map((value, index)=>{
                        let cityArr = citys[value];
                        return <div>
                                    <p>{value}</p>
                                    {(()=>{
                                        return <div onClick={this.getCityName}>
                                                    {
                                                        cityArr.map((cityName, i)=>{
                                                            return <span>{cityName}</span>
                                                        })
                                                    }
                                                </div>
                                    })()}
                                </div>
                    })
                } 
            </div>
        </div>
        )
    }

}
